import { css } from "@emotion/react";

const Variables = css`
  /* 默認值 */
  --default-dragable-max-width: 100%;
  --default-dragable-background-color: #ffffff;
  --default-dragable-border-color: rgba(0, 0, 0, 0.1);
  --default-dragable-border-width: 1rem;
  --default-dragable-border-radius: 8rem;
  --default-dragable-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.1);
  --default-dragable-z-index: 10;

  /* 變量初始化 */
  --dragable-max-width: var(
    --input-dragable-max-width,
    var(--default-dragable-max-width)
  );
  --dragable-background-color: var(
    --input-dragable-background-color,
    var(--default-dragable-background-color)
  );
  --dragable-border-color: var(
    --input-dragable-border-color,
    var(--default-dragable-border-color)
  );
  --dragable-border-width: var(
    --input-dragable-border-width,
    var(--default-dragable-border-width)
  );
  --dragable-border-radius: var(
    --input-dragable-border-radius,
    var(--default-dragable-border-radius)
  );
  --dragable-shadow: var(
    --input-dragable-shadow,
    var(--default-dragable-shadow)
  );
  --dragable-z-index: var(
    --input-dragable-z-index,
    var(--default-dragable-z-index)
  );
`;

const Normalize = css`
  position: absolute;
  touch-action: none;
  user-select: none;
  max-width: var(--dragable-max-width);
  background-color: var(--dragable-background-color);
  border: var(--dragable-border-width) solid var(--dragable-border-color);
  border-radius: var(--dragable-border-radius);
  box-shadow: var(--dragable-shadow);
  z-index: var(--dragable-z-index);
  transition: box-shadow 0.2s ease;

  &:active {
    box-shadow: 0 4rem 12rem rgba(0, 0, 0, 0.2);
    cursor: grabbing;
  }

  &:hover {
    cursor: grab;
  }
`;

const Dragging = css`
  &[data-dragging="true"] {
    opacity: 0.9;
    box-shadow: 0 6rem 16rem rgba(0, 0, 0, 0.25);
    cursor: grabbing;
  }
`;

const Css = {
  // 變量
  Variables,
  // 規範
  Normalize,
  // 狀態
  Dragging,
};

export default Css;
